<template>
	<view class="content">
		<view class="contain">
			<!-- :class="{'':params.scrollTop>=38}" -->
			<!-- <scroll-view scroll-x class="bg-white nav navList scrolltop" scroll-with-animation :scroll-left="scrollLeft">
				<view class="cu-item" :class="index==TabCur?'cu-item text-blue cur':''" v-for="(item,index) in params.navlist" :key="index"
				 @tap="tabSelect" :data-id="index">
					{{item.name}}
				</view>
			</scroll-view> -->

			<view class="NavBar">
				<graceNavBar :items="params.navListItem" textAlign="center" activeDirection="center" :currentIndex="TabCur"
				 activeLineBg="linear-gradient(to right, #699bf9, #3778fa)" activeLineWidth="80rpx" activeColor="#000000" lineHeight="45rpx" @change="navChange"></graceNavBar>
			</view>

			<view class="scroll_contain">
				<view v-for="(item, index) in params.goodsList" class="goods_list">
					<view class="title">
						<p>{{item.title}}</p>
						<p>
							<text>{{item.title}}</text>
							<image src="../../static/logo.png" mode=""></image>
						</p>
					</view>
					<image :src="item.main_img" class="goods_img"></image>

				</view>
			</view>
			<uni-load-more :loadingType="1" :contentText="params.loadmore"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import http from '../../utils/http.js'
	import url from '../../utils/url.js'
	import uniLoadMore from "@/pages/components/tools/uni-load-more.vue"
	import graceNavBar from "../../graceUI/components/graceNavBar.vue";
	import gracePage from "../../graceUI/components/gracePage.vue";
	export default {
		data() {
			return {
				TabCur: 0,
				scrollLeft: 0,
				params: {
					navlist: [],
					navListItem: [],
					goodsList: [],
					scrollTop: 0,
					loadmore: {
						contentdown: '上拉显示更多',
						contentrefresh: '正在加载...',
						contentnomore: '没有更多数据了'
					},
					pageInfo: {
						pageSize: '',
						pageNum: "",
						total: "",
						isOver: false,
					},
					swiper: {
						swiperList: [{
							id: 0,
							type: 'image',
							url: 'https://img.xiaopiu.com/userImages/img28159694677d8.jpg'
						}, {
							id: 1,
							type: 'image',
							url: 'https://img.xiaopiu.com/userImages/img27159694677d8.jpg',
						}, {
							id: 2,
							type: 'image',
							url: 'https://img.xiaopiu.com/userImages/img20159694648f8.jpg'
						}],
						dotStyle: false,
					}
				}
			}
		},
		components: {
			uniLoadMore,
			graceNavBar,
			gracePage
		},
		onLoad() {
			this.loadNav();
			this.loadMessage();
		},
		onPullDownRefresh: function() {
			let _self = this;
			let pageInfo = _self.params.pageInfo;
			pageInfo.pageNum = 0;
			pageInfo.total = 0;
			_self.params.goodsList = [];
			pageInfo.isOver = false;

			_self.loadMessage();
		},
		onReachBottom: function() {
			this.loadMessage();
		},
		onPageScroll(res) {
			this.params.scrollTop = res.scrollTop;
		},
		methods: {
			navChange: function(index) {
				console.log(index)
				this.navIndex = index;
			},
			tabSelect(index) {
				this.navIndex = index;
				this.scrollLeft = (index - 1) * 60
			},
			loadNav() {
				let _self = this;
				let urls = '';
				http.publicJson('get', url, '', function(res) {
					_self.params.navlist = res.data;
					_self.params.navListItem = [];
					for (let i of res.data) {
						_self.params.navListItem.push(i.name)
					}
				}, function(res) {
					console.log(res)
				}, 'navlist')
			},
			loadMessage() {
				let _self = this;
				let urls = '';
				let body = {
					pageSize: _self.params.pageInfo.pageSize,
					pageNum: _self.params.pageInfo.pageNum,

				}
				http.publicJson('get', url, '', function(res) {
					let result = res.data;
					_self.params.goodsList.push(...result)

					console.log(res)
				}, function(res) {
					console.log(res)
				}, 'goodsList')
				uni.stopPullDownRefresh()
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		// background: #fff;
		width: 100%;

		// .header {
		// 	position: relative;

		// 	.navs {
		// 		position: absolute;
		// 	}

		// }

		// .fixed{
		// 	padding-top: 23px;
		// 	position: fixed;
		// 	top: 0;
		// 	width: 100%;
		// 	box-shadow: none;
		// 	.action{
		// 		width: 20%;
		// 	}
		// }
		.NavBar {
			padding: 25upx 0;
		}

		.contain {
			.scrolltop {
				position: fixed;
				top: 0px;
				z-index: 100;
				width: 100%;
			}

			.scroll_contain {
				// padding-top: 80upx;

				.goods_list {
					padding: 0 20upx;
					margin-bottom: 20upx;
					// border-radius: 30px;
					background-color: rgba(255, 255, 255, 1);

					.title {
						padding: 0 10upx;
						font-size: 24upx;
						color: rgba(64, 64, 64, 1);
						line-height: 73upx;
						font-weight: 700;
						display: flex;
						justify-content: space-between;

						&>p:nth-child(2) {
							color: rgba(96, 96, 96, 1);
							font-weight: 500;
							font-size: 20upx;

							image {
								width: 42upx;
								height: 42upx;
								vertical-align: middle;
								margin: 0 0 0 10upx;
								border-radius: 50%;
							}
						}


					}

					.goods_img {
						width: 100%;
						height: 288upx;
					}
				}
			}


		}



	}
</style>
